<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jsTree &raquo; Demos</title>

	<script type="text/javascript" src="../lib/jquery.js"></script>
	<script type="text/javascript" src="../lib/jquery.cookie.js"></script>
	<script type="text/javascript" src="../lib/jquery.hotkeys.js"></script>
	<script type="text/javascript" src="../lib/jquery.metadata.js"></script>
	<script type="text/javascript" src="../lib/sarissa.js"></script>
	<script type="text/javascript" src="../jquery.tree.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.checkbox.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.contextmenu.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.cookie.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.hotkeys.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.metadata.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.themeroller.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.xml_flat.js"></script>
	<script type="text/javascript" src="../plugins/jquery.tree.xml_nested.js"></script>

	<link type="text/css" rel="stylesheet" href="syntax/shCore.css"/>
	<link type="text/css" rel="stylesheet" href="syntax/shThemeDefault.css"/>
	<style type="text/css">
	html, body { margin:0; padding:0; }
	body, td, th, pre, code, select, option, input, textarea { font-family:"Trebuchet MS", Sans-serif; font-size:10pt; }
	#container { width:800px; margin:10px auto; overflow:hidden; }
	.demo { height:200px; width:300px; float:left; margin:0; border:1px solid gray; font-family:Verdana; font-size:10px; background:white; overflow:auto; }
	.code { width:490px; float:right; margin:0 0 10px 0; border:1px solid gray; }
	pre { display:block; }
	.syntaxhighlighter { margin:0 0 0 0 !important; padding:0 !important; }
	input { font-size:14px; }
	</style>
	<script type="text/javascript" src="syntax/shCore.js"></script>
	<script type="text/javascript" src="syntax/shBrushJScript.js"></script>
	<script type="text/javascript" src="syntax/shBrushXml.js"></script>
	<script type="text/javascript">
		SyntaxHighlighter.config.clipboardSwf = 'syntax/clipboard.swf';
		$(function () {
			var h = 0;
			$("#container .source").each(function () {
				var code = $(this).html().replace(/</g,'&lt;').replace(/>/g,'&gt;');
				var div = $('<div class="code"><pre class="brush:' + ( $(this).is("script") ? 'js' : 'xml' ) + ';">' + code + '</pre></div>');
				$(this).after(div);
			});
			SyntaxHighlighter.all();
		});
	</script>
</head>
<body>
<div id="container">
	<h1 class="title">JSON with languages</h1>

	<p>Here is the demo of the long and short JSON format for multilanguage trees. You need to set the <a href="../documentation.html#languages">languages</a> option. In the buttons code, you can see how to get an instance - either by using <a href="../documentation.html#tree.reference">reference</a> and <a href="../documentation.html#tree.focused">focused</a>.</p>
	<script type="text/javascript" class="source">
	$(function () { 
		$("#l_json").tree({
			languages : [ "en", "bg" ],
			data : { 
				type : "json",
				opts : {
					static : [
						{ 
							// the short format demo
							data : { "en" : "A node", "bg" : "Нодче" },
							// here are the children
							children : [
								{ data : { "en" : "Child node 1", "bg" : "Дете 1" } },
								{ data : { "en" : "Child node 2", "bg" : "Дете 2" } }
							]
						},
						{ 
							attributes : { "id" : "li.node.id" }, 
							// this is the long data format
							data : { 
								bg : {
									title : "удри баце", 
									attributes : { "href" : "http://jstree.com" } 
								},
								en : {
									title : "Long format demo", 
									attributes : { "href" : "http://jstree.com" } 
								}
							} 
						}
					]
				}
			}
		});
	});
	</script>
	<div class="demo" id="l_json"></div>
	<p class="source">
		<input type="button" onclick='$.tree.focused().set_lang("en");' value="English" />
		<input type="button" onclick='$.tree.reference("#l_json").set_lang("bg");' value="Български" />
	</p>
</div></body></html>